// var ReactRouter = require('react-router');
// var Link = ReactRouter.Link;

// var NavBar = React.createClass({
    
//     render: function() {
//         debugger
//         return (
//             <div className="tab-bar">
//             {
//             this.props.items.map(function(item){
//                 return (
//                     <Link to={item.url}>{item.navTitle}</Link>
//                 )
//             })
//             }
//             </div>
//         )
//     }
// });
// module.exports = NavBar;


// 自己写的a link链接
var NavBar = React.createClass({
    // componentDidMount:function(){
    //     this.selected = this.props.index;
    // },
    getInitialState:function(){
        return {
            selected:''
        }
    },
    select: function(index){
        this.setState({selected:index});
      
    },
    isActive: function(index){
        // debugger
        return (index === this.state.selected)? 'nav-active':'nav-default';
        
    },
    render: function(){
        var self = this;
        // 获取props只有在组件渲染完成render里，而且这里this.state要设置初始的getInitialState值。
        this.state.selected = this.props.index;
        return (
            <div className="tab-bar">
                {
                    // 这里不能使用array的forEach函数，为空。forEach并没有返回值，要用map，返回新构成的新数组
                    this.props.items.map(function(item, index){
                        var href="#" + item.url;
                       return (
                            <li>    
                                <a href={href} key={index} className={self.isActive(index)} onClick={self.select.bind(self,index)}>{item.navTitle}</a>
                            </li>
                       )
                    })
                }
            </div>
        )
    }
});
module.exports = NavBar;